<template>
	<!-- 全局部署 绿色北京 房型图标 文字logo -->
	<view class="loginBox">
		<u-toast ref="uToast" />
		<view class="loginform">
			<text style="font-size: 40rpx;font-weight: 600;">Login</text>
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="80rpx" label="账号">
					<u-input v-model="form.userID" />
				</u-form-item>
				<u-form-item label="密码">
					<u-input type="password" v-model="form.userPwd" />
				</u-form-item>
				<u-button :custom-style="customStyle" size="medium" type="primary" @click="submit">立即登录</u-button>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					marginTop: '30rpx',
					marginLeft: '30rpx',
				},
				form: {
					userID: "",
					userPwd: "",
				},

			}
		},
		methods: {
			showToast() {
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					duration: 2000,
					position:'top'
				})
			},
			submit() {
				var that = this
				var user_name = this.form.userID
				var user_password = this.form.userPwd
				uni.request({
					url: "http://www.zphsow.ltd/api/user/login?user_name=" + user_name + "&user_password=" +
						user_password,
					method: "POST",
					success: (res) => {
						if (res.data.code === "200") {
							console.log(res.data)
							try{
								uni.setStorageSync('user', res.data.obj);
								
							}catch(e){
								console.log("出错啦")
							}
							uni.switchTab({
								url:"/pages/index/index"
							})
							this.showToast()
						}
					}
				})
			} 
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.loginBox {
		width: 100%;
		height: 100%;
		background-image: url("https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/beautifulBG/bg.jpg");
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
	}

	.loginform {
		width: 90%;
		height: 600rpx;
		text-align: center;
		border: 1px solid #007AFF;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-top: 200rpx;
		opacity: 0.5;

	}

	.u-form {
		width: 95%;
	}

	.u-form-item {
		margin-top: 40rpx;
		margin-left: 20rpx;
	}
</style>
